<template>
  <a-space direction="vertical" class="w-full">
    <div v-for="(item, index) in currentComponent?.data.list" :key="index">
      <div class="input_item">
        <a-textarea
          :auto-size="{ minRows: 3, maxRows: 5 }"
          class="input"
          v-model:value="item.value"
          placeholder="请输入内容"
        />
        <div class="operate">
          <a-checkbox v-model:checked="item.border">下划线</a-checkbox>
          <Variable :list="CertVariable" @on-click="handleInsertVariable(item, $event)">
            <div class="variable">插入变量</div>
          </Variable>
          <div class="remove" @click="handleRemove(index)">移除</div>
        </div>
      </div>
    </div>
    <a-button class="w-full" type="primary" @click="handleAdd">添加</a-button>
  </a-space>
</template>

<script setup lang="ts">
import { useCertStore } from '@/stores'
import Variable from '@/components/Variable/index.vue'
import { storeToRefs } from 'pinia'
import { CertVariable } from '@/diy/variable/cert'

const store = useCertStore()

const { currentComponent } = storeToRefs(store)
//添加
const handleAdd = () => {
  if (!currentComponent.value?.data.list) {
    return
  }
  currentComponent.value.data.list.push({
    value: '请输入内容',
    border: false
  })
}
//移除
const handleRemove = (index: number) => {
  if (!currentComponent.value?.data.list) {
    return
  }
  currentComponent.value.data.list.splice(index, 1)
}
//插入变量
const handleInsertVariable = (item: any, { value }: any) => {
  //默认值情况
  if (item.value === '请输入内容') {
    item.value = value
  } else {
    item.value = item.value + value
  }
}
</script>

<style lang="less" scoped>
.variable {
  text-decoration: underline;
  color: #1677ff;
  margin-top: 8px;
}

.remove {
  color: #ff4f50;
  margin-top: 8px;
  text-decoration: underline;
}

.input_item {
  width: 100%;
  display: flex;
  margin-bottom: 12px;
  .input {
    flex: 1;
  }

  .operate {
    margin-left: 6px;
    scale: 0.85;
    cursor: pointer;
  }
}
</style>
